<!-- 实现点击，底部高亮条，移动的效果 -->
<template>
  <div class="lyf-ui-tab">
    <div class="lyf-ui-tab-inner">
      <div 
        ref="lyfUiTabItemsRef" 
        class="lyf-ui-tab-items"
        :class="{
          'scrollable': tabs.length >= 4
        }"
      >
        <div 
          class="lyf-ui-tab-item" 
          :class="{
            active: idx === value
          }"
          :style="{
            color: idx === value ? activeColor : ''
          }"
          v-for="(tab, idx) in tabs" 
          :key="idx"
          @click="tabItemClick(idx)"
        >{{ tab }}</div>
      </div>
      <div class="lyf-ui-tab-line" :style="{
        width: widthValue + 'px',
        left: leftValue + 'px',
        backgroundColor: activeColor
      }"></div>
    </div>
    <div class="lyf-ui-tab-more" v-if="tabs.length > 8">
      <lyf-icon icon="list1" :size="22"></lyf-icon>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LyfTab',
  props: {
    tabs: {
      type: Array,
      default: () => []
    },
    value: {
      type: Number,
      default: 0
    },
    activeColor: String,
  },
  data() {
    return {
      tabItemsWidth: 0,
      widthList: [],
      offsetLeftList: [],
    }
  },
  mounted() {
    const tabItems = this.$refs.lyfUiTabItemsRef
    this.tabItemsWidth = tabItems.clientWidth
    // console.log(tabItems.scrollWidth);
    // console.log(tabItems.scrollLeft);
    // setTimeout(() => {
    //   tabItems.scrollTo(20, 0)
    //   console.log(tabItems.scrollLeft);
    // }, 2000)
    for (let i = 0; i < tabItems.childNodes.length; i++) {
      const tabItem = tabItems.childNodes[i]
      this.widthList.push(tabItem.clientWidth)
      this.offsetLeftList.push(tabItem.offsetLeft)
    }
  },
  computed: {
    widthValue() {
      return this.widthList[this.value]
    },
    leftValue() {
      return this.offsetLeftList[this.value]
    },
  },
  methods: {
    tabItemClick(i) {
      if (this.value === i) return
      this.$emit('input', i)
      const tabItems = this.$refs.lyfUiTabItemsRef
      let moveDistance = this.offsetLeftList[i]
      console.log('moveDistance:',moveDistance)
      tabItems.scrollBy(10, 0)
    }
  }
}
</script>

<style scoped>
.lyf-ui-tab {
  position: relative;
  padding: 0 var(--space_16);
  background-color: var(--background-color_2);
}
.lyf-ui-tab .lyf-ui-tab-inner {
  position: relative;
}
.lyf-ui-tab .lyf-ui-tab-inner .lyf-ui-tab-line {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  /* height: 0; */
  border-radius: var(--radius_4) var(--radius_4) 0 0;
  background-color: var(--primary-color);
  transition: left .1s;
}
.lyf-ui-tab .lyf-ui-tab-items {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 44px;
}
.lyf-ui-tab .lyf-ui-tab-items::-webkit-scrollbar {
  display: none;
}
.lyf-ui-tab .lyf-ui-tab-items .lyf-ui-tab-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 90%;
  color: var(--font-color_2);
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}
.lyf-ui-tab .lyf-ui-tab-items .lyf-ui-tab-item.active {
  color: var(--primary-color);
  font-weight: 500;
}
.lyf-ui-tab .lyf-ui-tab-items.scrollable {
  justify-content: flex-start;
  flex-shrink: 0;
}
.lyf-ui-tab .lyf-ui-tab-items.scrollable .lyf-ui-tab-item {
  margin: 0 var(--space_16);
}
.lyf-ui-tab .lyf-ui-tab-items.scrollable .lyf-ui-tab-item:first-child {
  margin-left: 0;
}
.lyf-ui-tab .lyf-ui-tab-items.scrollable .lyf-ui-tab-item:last-child {
  margin-right: 0;
}
.lyf-ui-tab .lyf-ui-tab-more {
  position: absolute;
  right: var(--space_16);
  top: 4px;
  bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 24px;
  box-shadow: -12px 0 15px 0 var(--tab-shadow-color);
  background-color: var(--tab-shadow-color);
}
</style>